<template>
  <div class="box">
    
    <canvas id="canvasCamera"
      ref="canvas"
      style="display: none"
      :width="videoWidth"
      :height="videoHeight"
    >
    </canvas>

    <video id="demo"
      ref="video"
      src=""
      :width="videoWidth"
      :height="videoHeight"
    >
    </video>

    <div class="btns">
        <el-button type="info" class="takePic" @click="takePhoto" circle >
            <i class="el-icon-camera-solid" style="font-size: 30px"></i>
        </el-button>
    </div>
  </div>
    
    
</template>

<script>
import { ref } from "@vue/reactivity";
export default {
  setup() {
    let videoHeight = ref(425);
    let videoWidth = ref(375);

    function callCamera(){
      navigator.mediaDevices
      .getUserMedia({
        video: true,
      })
      .then((res) => {
        this.$refs['video'].srcObject = res;
        this.$refs['video'].play();
      })
      .catch(() => {
        console.log("error");
      });
    }

    return {
      videoHeight,
      videoWidth,
      callCamera
    };
  },

  created(){
    this.callCamera()
  },
  
  methods: {
    takePhoto(){
      let context = this.$refs['canvas'].getContext('2d');
      //绘图
      context.drawImage(this.$refs['video'],0,0,425,375);
      //转base64格式
      let imgData = this.$refs['canvas'].toDataURL('image/jpeg',0.7);
      console.log(imgData);
    }
  },
};
</script>

<style scoped>
body{
  background-color:black;
  margin: 0px
}
.box{
  height: 100%;
  width: 100%;
  margin-bottom: 70px;
}
video{
    background-color:white;
    margin-top: 50px;
}
.btns{
    height: 100px;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}
.takePic{
    width: 60px;
    height: 60px;

}
</style>
